<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style>
		#login {
			width: 400px;
			margin: 150px auto
		}

		#alert_info {
			margin: 2px;
			padding: 2px;
			text-align: center;
			margin-bottom: 10px;
			display: none
		}
	</style>
	<script src='ajax.js'></script>
	<script>

		window.onload = function () {
			var oBtn = document.getElementById("btn1");
			var oAlert = document.getElementById("alert_info");
			var aInputs = document.getElementsByTagName("input");
			oBtn.onclick = function () {
				$ajax({
					method: "post",
					url: "login.php",
					data: {
						username: aInputs[0].value,
						password: aInputs[1].value
					},
					success: function (result) {

						var obj = JSON.parse(result);
						if (obj.code) {
							oAlert.className = 'alert alert-danger';
						} else {
							oAlert.className = 'alert alert-success';
						}
						oAlert.style.display = 'block';
						oAlert.innerHTML = obj.message;
					},
					error: function (msg) {
						alert(msg);
					}
				})
			}
		}

	</script>
</head>

<body>
	<div class='container'>
		<div class='panel panel-primary' id='login'>
			<div class='panel-heading'>
				登录
			</div>
			<div class='panel-body'>
				<div class='form-group'>
					<label for="username">用户名：</label>
					<input type="text" name='username' class='form-control'>
				</div>
				<div class='form-group'>
					<label for="password">密码：</label>
					<input type="text" name='password' class='form-control'>
				</div>
				<div id='alert_info' class='alert alert-danger'>xxxxx</div>
				<a href="register.html">马上注册</a>
				<button id='btn1' class='btn btn-primary pull-right'>登录</button>
			</div>
		</div>
	</div>
</body>

</html>